<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
	<th:block th:include="include :: header('路由详细')" />
</head>
<body>
    <div class="main-content">
        <form id="form-route-edit" class="form-horizontal">
            <h4 class="form-header h4">基本信息</h4>
            <div class="row">
            	<div class="col-sm-10">
                    <div class="form-group">
                        <label class="col-sm-4 control-label"><span style="color: red;">* </span> id (全局唯一)：</label>
                        <div class="col-sm-8">
                            <input placeholder="请输入路由 id" class="form-control" type="text" th:value="${mongoRoute.routeId}" maxlength="64" readonly/>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-10">
                    <div class="form-group">
                        <label class="col-sm-4 control-label"><span style="color: red;">* </span>uri：</label>
                        <div class="col-sm-8">
                            <input placeholder="请输入 uri" class="form-control" type="text" th:value="${mongoRoute.uri}" maxlength="256" readonly/>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-10">
                    <div class="form-group">
                        <label class="col-sm-4 control-label"> order：</label>
                        <div class="col-sm-8">
                            <input placeholder="请输入序号" class="form-control" type="number" th:value="${mongoRoute.order}" value="0" min="0" step="1" max="6000" readonly/>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-10">
                    <div class="form-group">
                        <label class="col-sm-4 control-label"><span style="color: red;">* </span>predicates：</label>
                        <div class="col-sm-8">
                            <p></p>
                            <p th:each="predicates : ${mongoRoute.predicates}" th:id="${predicates.name}">
                                [[${predicates.name}]]=<span th:each="mapArgs, mapIndex : ${predicates.args}"
                                                             th:text="${mapIndex.size > 1 ? mapIndex.count == mapIndex.size ? mapArgs.value : mapArgs.value + ',' : mapArgs.value}"></span>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-10">
                    <div class="form-group">
                        <label class="col-sm-4 control-label">filters：</label>
                        <div class="col-sm-8">
                            <p></p>
                            <p th:each="filters : ${mongoRoute.filters}" th:id="${filters.name}">
                                [[${filters.name}]]=<span th:each="mapArgs, mapIndex : ${filters.args}"
                                                             th:text="${mapIndex.size > 1 ? mapIndex.count == mapIndex.size ? mapArgs.value : mapArgs.value + ',' : mapArgs.value}"></span>
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <h4 class="form-header h4">其他信息</h4>
            <div class="row">
                <div class="col-sm-10">
                    <div class="form-group">
                        <label class="col-sm-4 control-label">备注：</label>
                        <div class="col-sm-8">
                            <textarea name="remark" maxlength="500" class="form-control" rows="3"></textarea>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>

	<th:block th:include="include :: footer" />
    <script th:inline="javascript">

        $(document).ready(function () {

            let predicates = [[${mongoRoute.predicates}]];
            let filters = [[${mongoRoute.filters}]];

            // 断言隐藏域赋值
            let predicatesHtml = '';
            predicates.forEach(function (data) {
                let predicateArgs = data.args;
                let mapArgs = '';
                for (let key in predicateArgs) {
                    mapArgs += predicateArgs[key] + ',';
                }
                mapArgs = mapArgs.slice(0, -1);
                predicatesHtml += '<input hidden="hidden" id="hidden' + data.name + '" name="predicates" value="' + data.name + '=' + mapArgs + '">';
            });
            $('#form-route-edit').append(predicatesHtml);

            // 过滤器隐藏域赋值
            let filtersHtml = '';
            filters.forEach(function (data) {
                let filterArgs = data.args;
                let mapArgs = '';
                for (let key in filterArgs) {
                    mapArgs += filterArgs[key] + ',';
                }
                mapArgs = mapArgs.slice(0, -1);
                filtersHtml += '<input hidden="hidden" id="hidden' + data.name + '" name="filters" value="' + data.name + '=' + mapArgs + '">';
            });
            $('#form-route-edit').append(filtersHtml);
            
        });

    </script>
</body>
</html>
